import Taro, { Component } from '@tarojs/taro'
import { View , Text , Image} from '@tarojs/components';
import { AtRate , AtButton } from 'taro-ui';
import NoData from '../../components/nodata/nodata'
import { getUserList , acOrder } from '../../util/api';
import { baseImgSrc } from '../../util/base_url';
import { diffId } from '../../util/util';
import './drivercarlist.scss';

export default class UserCarList extends Component{
    constructor(){
        super(...arguments);
        this.state  = {
            type:0,
            invite:0,
            list:[],
            listDataShow:false,
        }
    }
    componentWillMount(){
        this.getList();
        Taro.eventCenter.on('refreshList',() => {
            this.setState({list:[]},() => {
                this.getList();
            })
        })
        Taro.eventCenter.on('refreTabList',() => {
            this.setState({list:[]},() => {
                this.getList();
            })
        })
        Taro.eventCenter.on('loopRefresh',() => {
            this.loopRefresh();
        })
    }
    static options = {
        addGlobalClass: true
    }
    loopRefresh(){
        let { invite , type , list } = this.state;
        getUserList({type,invite},true).then( res => {
            wx.stopPullDownRefresh()
            if(res.data && Array.isArray(res.data)){
                if(diffId(res.data,list).status){
                    this.setState({list:res.data},() => {
                        this.setState({listDataShow:this.state.list.length == 0})
                    });
                }
            }
        })
    }
    getList(){
        let { invite , type } = this.state;
        getUserList({type,invite},true).then( res => {
            wx.stopPullDownRefresh()
            if(res.code == 0){
                this.setState({list:res.data},() => {
                    this.setState({listDataShow:this.state.list.length == 0})
                });
            }else{
                this.setState({list:[],listDataShow:true});
            }
        })
    }
    changeSort(sort,value){ //改变分类
        if(sort == 'type'){
            this.setState({type:value,list:[]},() => {
                this.getList();
            })
        }else if(sort == 'invite'){
            this.setState({invite:value,list:[]},() => {
                this.getList();   
            })
        }
    }
    refreshList(){
        this.setState({list:[]},() => {
            this.getList();
        })
    }
    acpOrder(id,e){
        console.log(e)
        e.stopPropagation();
        setTimeout(() => {
            Taro.showModal({
                title:"提示",
                content:"请确认接受此订单么",
            }).then( res => {
                if(res.confirm){
                    acOrder({id}).then( res => {
                        if(res.code == 0){
                            Taro.navigateTo({
                                url:"/pages/orderlist/orderlist?type=2"
                            })
                        }else{
                            Taro.showModal({
                                title:"提示",
                                content:res.msg
                            })  
                        }
                    })
                }
            })
        },200)
        return false
    }
    toDtlPage(id){
        Taro.navigateTo({
            url:`/pages/driverjiedan/driverjiedan?id=${id}&type=${this.state.invite}`,
        })
    }
    render(){
        let { invite , type , list , listDataShow } = this.state;
        return (
            <View className='usercar'>
                <View className='tab-list flex align-items space-between tab1'>
                    <View className={`item fn-ctr ${invite == 0 ? 'active' : ''}`} onClick={this.changeSort.bind(this,'invite',0)}>
                        <Text className='txt'>大厅</Text>
                        <View className='line'></View>
                    </View> 
                    <View className={`item fn-ctr ${invite == 1 ? 'active' : ''}`} onClick={this.changeSort.bind(this,'invite',1)}>
                        <Text className='txt'>邀请我的</Text>
                        <View className='line'></View>
                        {
                            list.length > 0 ?  <View className='cirle-num fn-ctr'>{list.length}</View> : ""
                        }
                    </View>
                </View>
                <View className='tab-list flex align-items space-between tab2'>
                    <View className={`item fn-ctr ${type == 0 ? 'active' : ''}`} onClick={this.changeSort.bind(this,'type',0)}>
                        <Text className='txt'>全部</Text>
                        <View className='line'></View>
                    </View> 
                    <View className={`item fn-ctr ${type == 1 ? 'active' : ''}`} onClick={this.changeSort.bind(this,'type',1)}>
                        <Text className='txt'>出发地最近</Text>
                        <View className='line'></View>
                    </View> 
                    <View className={`item fn-ctr ${type == 2 ? 'active' : ''}`} onClick={this.changeSort.bind(this,'type',2)}>
                        <Text className='txt'>目的地最近</Text>
                        <View className='line'></View>
                    </View>
                </View>
                <View className='list'>
                    {
                        list.map( (v,i) => (
                            <View className='info-card' >
                                <View className='user flex align-items space-between' onClick={this.toDtlPage.bind(this,v.id)}>
                                    <Image className='heading' src={v.headimg} />
                                    <View className='right flex1 flex align-content-between flex-wrap'>
                                        <View className='top flex align-items flex-start'>
                                            <Text className='top-txt'>{v.nickname}</Text>
                                            <View className='yan zheng fn-ctr'>已通过人脸识别</View>
                                        </View>
                                        <View className='top flex align-items space-between'>
                                            <AtRate value={5} size={15} margin={15} />
                                            <Text className='dance-taxt free-num'>已出行{v.counts}次</Text>
                                        </View>
                                    </View>
                                </View>
                                <View className='time flex align-items flex-start' onClick={this.toDtlPage.bind(this,v.id)}>
                                    <Image className='time-pic' src={`${baseImgSrc}/index_time.png`} />
                                    <Text className='time-txt'>{v.start_time} 出发</Text>
                                </View>
                                <View className='address-info flex align-items space-between' onClick={this.toDtlPage.bind(this,v.id)}>
                                    <View className='left'>
                                        <Image className='left-pic' src={`${baseImgSrc}/fa_dao.png`} />
                                    </View>
                                    <View className='right flex1 flex flex-wrap align-content-between'>
                                        <View className='right-top flex align-items space-between'>
                                            <View className='right-address ell1'>{v.address}</View>
                                            <Text className='dance-taxt'>{v.start}</Text>
                                        </View>
                                        <View className='right-bottom flex align-items space-between'>
                                            <View className='right-address ell1'>{v.go_address}</View>
                                            <Text className='dance-taxt'>{v.end}</Text>
                                        </View>
                                    </View>
                                </View>
                                <AtButton className='invi-btn' type='primary' size='normal' onClick={this.acpOrder.bind(this,v.id)}>立即接单</AtButton>
                            </View>
                        ))
                    }
                    <NoData needShow={listDataShow} pic='/no_carer.png' noDataTxt='暂无订单' size='small'  />
                </View>
            </View>
        )
    }
}